import React, { useEffect, useState } from 'react';
import {useNavigate} from 'react-router-dom'
import axios from 'axios'
import './index.css'
const Index = () => {
    const navigate =useNavigate();
    const [coming,setcoming] =useState([])
    const fecthData =async ()=>{
        var res =await axios.get("http://122.112.161.135:4000/api/movie/comingSoon")
        console.log(res.data.res);
        setcoming(res.data.res)
    }
    const toggle=(id)=>{
        navigate(`/detail/${id}`)
    }
    useEffect(()=>{
        fecthData();
    },[])
    return (
        <div className="nav">

           {coming.map(item=>{
               return (<div key={item._id} onClick={()=>toggle(item._id)}>
                  <img className="navv" src={item.pic} alt="" />
                  <p>{item.title}</p>
               </div>)
           })}
        </div>
    );
}

export default Index;
